import React, { memo, useEffect } from 'react'
import '../index.less';
import 'ace-builds/src-noconflict/ace'
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/src-noconflict/mode-python'
import 'ace-builds/src-noconflict/theme-monokai'
import AceEditor from 'react-ace'
import BlockIcon from '@/components/workflow/block-icon'
import { RiCloseLine, RiMoreFill, RiPlayLargeLine } from '@remixicon/react'
import ThemeBtn from '@/components/antd-comp/theme-btn'
import { RightCircleOutlined } from '@ant-design/icons';
import { useWorkFlowStore } from '@/store/workflowStore';
import { checkNodeValidity } from '@/pages/workflow/utils';
import { WorkflowRunningStatus } from '@/components/workflow/types';
import {
  CheckCircleOutlined,
  CloseCircleOutlined,
  SyncOutlined,
} from '@ant-design/icons';
import { Tag } from 'antd';

const Download = ({ editData, info, closeIde }) => {

  const {
    flowVariables,
    deleteNode,
    setVerifying,
    singleRunningInfo,
    setFlowVariables,
    updateRunType,
    updateSingleRunningInfo,
    clearRunInfo
  } = useWorkFlowStore()


  const singleNodeRun = () => {
    // if (!checkLinkStatus()) {
    //   return false
    // }
    clearRunInfo()
    setVerifying(true)
    updateRunType('single')
    /* 失败 */
    if (!checkNodeValidity(info, info.node_type)) {
      updateSingleRunningInfo(info.id, WorkflowRunningStatus.Invalid)
      // setFlowVariables(nodeData.id, nodeData.title, { ...nodeData })
      return
    }
    /* 打开运行弹窗runDrwaerHid 填参数 */
    setFlowVariables(info.id, info.title, { ...info, runDrwaerHid: 1 })
  }

  useEffect(() => {
    console.log("11111111111111====>flowVariables", flowVariables[info.id])
  }, [flowVariables[info.id].runDrwaerHid]);

  const runInfo = singleRunningInfo[info.id]

  return (
    <div className='codeIdeDialog'>
      <div className='codeIdeDialog-header'>
        <div className='codeIdeDialog-header-left'>
          <BlockIcon className="mr-1 shrink-0" type={info.type} size="md" />
          <div>
            {info.title}
          </div>
          {
            runInfo && runInfo.status === WorkflowRunningStatus.Failed && (
              <Tag icon={<CloseCircleOutlined />} color="error">
                运行失败
              </Tag>
            )
          }
          {
            runInfo && runInfo.status === WorkflowRunningStatus.Running && (
              <Tag icon={<SyncOutlined spin />} color="warning">
                运行中
              </Tag>
            )
          }
          {
            runInfo && runInfo.status === WorkflowRunningStatus.Succeeded && (
              <Tag icon={<CheckCircleOutlined />} color="success">
                运行成功 {runInfo?.endTime ? ((runInfo.endTime - runInfo.startTime) / 1000).toFixed(3) + 's' : ''}
              </Tag>
            )
          }
        </div>
        <div className='codeIdeDialog-header-right'>
          <ThemeBtn
            style={{ color: '#FFFFFF' }}
            onClick={singleNodeRun}
          >
            测试代码
          </ThemeBtn>

          <RightCircleOutlined className="header-right-btn" onClick={closeIde} />
        </div>
      </div>
      <AceEditor
        placeholder="Placeholder Text"
        mode="python"
        theme="monokai"
        name="blah2"
        onChange={value => {
          editData({
            code: value
          })
        }}
        fontSize={20}
        showPrintMargin={false}
        showGutter={true}
        highlightActiveLine={true}
        value={info.code}
        className={`codeIdeDialog-editor`}
        setOptions={{
          enableBasicAutocompletion: false,
          enableLiveAutocompletion: false,
          enableSnippets: false,
          enableMobileMenu: true,
          showLineNumbers: true,
          tabSize: 2,
        }} />

    </div>)
}

export default memo(Download)